<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>大众点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/info.css" rel="stylesheet">

  <style type="text/css">
  .setcount{
	  font-weight: bold;
	   font-size: 15px;
	   color: red;
	  }
	  .introduceStyle{
	  
	  flex-direction: column;
	  }
  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <div class="header-back-btn" @click="goBack" ><i class="el-icon-arrow-left"></i></div>
    <div class="header-title">资料编辑&nbsp;&nbsp;&nbsp;</div>
  </div>
  <div class="edit-container">
    <div class="info-box">
      <div class="info-item">
        <div class="info-label">头像</div>
        <div class="info-btn">
          <img width="35" :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="info-item">
        <div class="info-label">昵称</div>
        <div class="info-btn">
          <div >{{this.messFrom.name}}</div>
          <div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="info-item introduceStyle">
        <div class="info-label">个人介绍 </div>
        <div class="info-btn ">
          <div type="textarea" style="overflow: hidden; color:maroon;width:100%;text-align: left;line-height: 20px">{{this.messFrom.introduce || '介绍一下自己'}}</div>
          
        </div>
      </div>
    </div>
    <div class="info-box">
      <div class="info-item">
        <div class="info-label">性别</div>
        <div class="info-btn">
          <div v-if="">{{this.messFrom.gender}}</div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="info-item">
        <div class="info-label">城市</div>
        <div class="info-btn">
         <div>{{this.messFrom.city||'中国'}}</div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="info-item">
        <div class="info-label">生日</div>
        <div class="info-btn">
          <div>{{this.messFrom.birthday||'1999.01.01'}}</div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
    </div>

    <div class="info-box">
      <div class="info-item">
        <div class="info-label">我的积分 <el-button   @click="qiandao"  type="success" style="width: 6rem" class="btnStyle" icon="el-icon-check"  size="mini" :disabled="disabled" circle><span  >{{this.disabled?'已签到':'签到'}}</span></el-button><div style="font-size:4px;color:maroon">上次签到时间:<span style="">{{this.userInfos.updateTime}}</span></div></div>
        <div class="info-btn">
          <div>{{this.messFrom.credits||'0'}}</div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="info-item">
        <div class="info-label">会员等级  <el-button  @click="vip" type="success" style="width: 10rem;" class="btnStyle" icon="el-icon-check":disabled="this.messFrom.credits>=100?false:true"size="mini">100积分换vip</el-button></div></div>
        <div class="info-btn">
          <div>
		  <span v-if="messFrom.level>0" style="color:red;">
		     你是尊贵的VIP<span style="font-size:16px">{{this.messFrom.level}}</span>
		 </span>
		 <span v-else style="color:blue">
	    成为VIP尊享特权
		</span>
		 </div>
		  <div><i class="el-icon-arrow-right"></i></div>
		  </div>
      </div>
	  
	 

		  
		  	 <el-button @click="drawer = true" type="primary" style="width:350px">
					  点击编辑
					</el-button>
                     
					<el-drawer
					style="width:250%"
					  title="修改个人信息"
					  :visible.sync="drawer"
					  :direction="direction"
					  :before-close="handleClose">
					  <!-- <el-upload -->
						   <!-- :show-file-list="true" -->
							<!-- list-type="text" -->
							<!-- accept="image/*" -->
							<!-- :file-list="item.headImgList" -->
							<!-- :action="computedUploadImgUrl" -->
							<!-- :with-credentials="true" -->
							<!-- :on-success="(value)=> handleSuccessImg(index, value)" -->
							<!-- class="uploader" -->
						  <!-- > -->
							<!-- <el-button size="mini" type="primary">上传图片</el-button> -->
						  <!-- </el-upload> -->
  <div class="info-item">
     
        <div class="info-btn">
          <img width="85" :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
         
        </div>
		
      </div>
					  	      <el-upload
								  class="upload-demo"
								  action="http://localhost:8081/upload/icon"
								  :on-preview="handlePreview"
								  :on-remove="handleRemove"
							     :on-success="(value)=> handleSuccessImg( value)" 
								  :limit="1"
								  :auto-upload="true"
								  list-type="picture">
								  <el-button size="small" type="primary">点击修改头像</el-button>
								  <div slot="tip" class="el-upload__tip">自动修改,只能上传jpg/png文件，且不超过500kb</div>
								</el-upload>
					  
					<el-input
				  type="text"
				  style="margin-top:20px"
				  placeholder="昵称"
				  v-model="messFrom.name"
				  maxlength="20"
				  show-word-limit
				>
				</el-input>
		
				
					<el-input
				  type="text"
				  style="margin-top:20px;"
				  placeholder="性别"
				  v-model="messFrom.gender"
				  maxlength="1"
				  show-word-limit
				>
				</el-input>
				</el-input>
					<el-input
					
				  type="text"
				  style="margin-top:20px"
				  placeholder="所在城市"
				  v-model="messFrom.city"
				  maxlength="10"
				  show-word-limit
				>
				</el-input>
					<el-input
					
				  type="date"
				  style="margin-top:20px"
				  placeholder="你的生日"
				  v-model="messFrom.birthday"
				  maxlength="20"
				  show-word-limit
				>
				</el-input>
					<el-input
					
				    type="textarea"
					:rows="2" 
				  style="margin-top:20px"
				  placeholder="说点啥描述自己"
				  v-model="messFrom.introduce"
				  maxlength="60"
				  show-word-limit
				>
				</el-input>

					<b >当前积分:<span class="setcount">{{this.messFrom.credits}}</span> 等级:<span class="setcount">{{this.messFrom.level}}</span></b><br>
					
			<el-button style="margin-top:10px;width:40%"  type="primary" :plain="true" @click="onSubmit" :disabled="isCommit">{{this.MessBtn||'提交'}}</el-button>
			</el-drawer>
	  
	
	  

    </div>

  </div>
  <foot-bar :active-btn="4"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>

  const app = new Vue({
    el: "#app",
    data: {
	isCommit:false,//可以提交
	MessBtn: '提交', //提交按钮名字
	disabled:false,  //可以签到
	MessBtn:'',
	 drawer: false,  //默认关闭抽屉
        direction: 'ltr', //抽屉的
      user: {},
	  userInfos:[],
      info: {},
       newIcon:'',
	  messFrom:{
	    userId:'',
	    name:'张三子',
		city:'',
		introduce:'给自己来个介绍',
		birthday:'',
		credits:0, //积分
		level:0,//等级
		icon:'', //用户头像
		gender:'男',//0：男，1：女
	  }
    },
    created() {
	
      this.checkLogin();
	 this.queryUserInfo();
	 
	
	 
    },
	<!-- mounted(){ -->
	 <!-- this.queryUserInfo();//查用户详细信息 -->
	<!-- }, -->
    methods: {
	
		handleSuccessImg(response){
			
		console.log("----"+response);
		console.log("-1---"+response.data);
		this.newIcon=response.data;
		//修改头像去
			  axios({
		 method: 'post',
			url:'/user/updateIcon',
			 data:{
				 myIcon:this.newIcon
				}
		}).then(({data})=>{
		    this.$message({
			  message: '头像'+data,
			  type: 'success'
			})
	

		
       }).catch(this.$message.error)
		}
		,
		 handleRemove(file, fileList) {
			console.log(file, fileList);
		  },
		  handlePreview(file) {
			console.log(file);
		  },
	  vip(){
	      if(this.messFrom.credits-100>=0&&this.messFrom.level<10){
		  this.messFrom.credits=this.messFrom.credits-100;
		  this.messFrom.level++;
		    this.$message({
          message: '兑换成功,现在为vip'+this.messFrom.level,
          type: 'success'
        }) 
		  }  else if(this.messFrom.level==10){
		        this.$message({
          message: '你已经是最高级VIP10',
          type: 'error'
		      })
	      }
		  else {
		   this.$message({
          message: '积分不足兑换失败',
          type: 'error'
				  })
			  }
			  axios({
		 method: 'post',
			url:'/userInfo/updateCreditLevel',
			 data:{
				myCredits: this.messFrom.credits,//传递
				myLevel: this.messFrom.level
				}
		}).then(({data})=>{
		
       })
	   },
	
		//判断是否可以签到
		compareQian(){
		　　let yy = new Date().getFullYear();
		　　let mm = new Date().getMonth()+1+"";
		　　let dd = new Date().getDate()+"";
		if(dd.length<2){
		  dd="0"+dd;
		}
		if(mm.length<2){
		  mm="0"+mm;
		}
		　var times = yy+'-'+mm+'-'+dd;
	console.log("user"+this.user);
		if(this.user.length!=0){
		console.log("user不为空")
		if(this.userInfos==null||this.userInfos==''){
			console.log("userIfo为空")
		  //用户相关不在，则直接可以签到
		  this.disabled=false;
		   return true;

		}
	
		}
	     var beforeTime=(this.userInfos.updateTime+"").substring(0,10);
		 console.log("a"+times);
		  console.log("b"+beforeTime);
		  if(times===beforeTime){
		 console.log("不可以签到");
		  this.disabled=true;
		  }else{
		   console.log("可以签到");
		   this.disabled=false;//可以签到
		     return true;
		  }
		  return false;
		},
		
		//签到
	qiandao(){
	this.queryUserInfo();//在查一次用户详细
	
	if(!this.compareQian()){
	if(this.disabled){
	 this.$message({
			  message: '今天你已经签到了,明天再来',
			  type: 'error'
			}) 
	return;
	 }
	 return;
	}
	   
		this.messFrom.credits=this.messFrom.credits+10;
		
		 this.$message({
			  message: '签到成功积分+10,现在积分'+this.messFrom.credits,
			  type: 'success'
			}) 
	axios({
	 method: 'post',
	    url:'/userInfo/updateCreditLevel',
		 data:{
			myCredits: this.messFrom.credits,//传递
            myLevel: this.messFrom.level
			}
	}).then(({data})=>{

	   //调用是否有签到
	   this.disabled=true;//关闭
		this.compareQian();
	
       })
	}
	
	,
	onSubmit(){
	
	  <!-- <!--  let param = new URLSearchParams() -->
		
		     <!-- param.append('name', this.messFrom.introduce) -->
		   <!-- param.append('introduce',this.messFrom.birthday ) -->
		     <!-- param.append('name',  this.messFrom.city) -->
		   <!-- param.append('name', this.messFrom.name) -->
		     <!-- param.append('gender', this.messFrom.gender) --> -->
	   axios({
	    headers: {
				   'Content-Type': 'application/json; charset=utf-8'
			   },
		 method: 'post',
	    url:'/userInfo/updateUser',
	    data: JSON.stringify(this.messFrom),
	  } )
        .then(({data}) => {
		  
		})
		this.$message({
          message: '修改成功',
          type: 'success'
        }) 
	
		this.isCommit = true;
			
		   // 按钮倒计时
        let i = 3;
        this.MessBtn = (i--) + '秒后可重发'
        let taskId = setInterval(() => this.MessBtn = (i--) + '秒后可提交', 1000);
        setTimeout(() => {
          this.isCommit = false;
          clearInterval(taskId);
          this.MessBtn = "提交";
		  location.reload();	//刷新页面	
        }, 3000)
		   
	},
	
	//抽屉方法
	handleClose(done) {
        
            done();
        
      },
	
      checkLogin() {
        // 查询用户信息
        axios.get("/user/me")
        .then(({data}) => {
		
	console.log(this.user);
          this.user = data;
		  this.messFrom.userId=this.user.id;
		   this.messFrom.name=this.user.nickName;
		  this.messFrom.icon=this.user.icon;
          this.info = JSON.parse(sessionStorage.getItem("userInfo")) || {}
        })
        .catch(err => {
          this.$message.error(err);
          setTimeout(() => location.href = "login.html", 1000)
        })
      },
	  
	  // 查询用户详细信息
	  queryUserInfo(){
	     axios.get("/userInfo/queryById")
		 .then(({data})=>{
		    this.userInfos=data;
		 if(data!=null){
			  if(this.userInfos.gender==1){
			  this.messFrom.gender='女'
			  }else{
			   this.messFrom.gender='男'
			  }
			      <!-- var beforeTime=(this.userInfos.updateTime+"").substring(0,10); -->
				   <!-- console.log("bdddd"+beforeTime); -->
				this.messFrom.city=this.userInfos.city;
			  this.messFrom.credits	  =this.userInfos.credits;
			  this.messFrom.level	  =this.userInfos.level;
			  this.messFrom.introduce =this.userInfos.introduce;
			  this.messFrom.birthday  =this.userInfos.birthday;
			  this.compareQian();//等这个用户加载详细结束后调用是否可以签到
		}  
		 })
	  },
	  
      goBack(){
	  this.queryUserInfo();
        history.back();
      }
    },

  })
</script>
</body>
</html>